import React from 'react';
import { ChevronRightIcon } from 'lucide-react';
export const ToddlerPage = () => {
  const categories = [{
    id: 'learning-toys',
    title: 'Learning Toys',
    image: 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Educational toys to develop cognitive and motor skills'
  }, {
    id: 'childproofing',
    title: 'Childproofing',
    image: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Safety gates, locks, and home safety solutions'
  }, {
    id: 'feeding-mealtime',
    title: 'Feeding & Mealtime',
    image: 'https://images.unsplash.com/photo-1596443686812-2f45229eebc3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Toddler dinnerware, utensils, and mealtime accessories'
  }, {
    id: 'potty-training',
    title: 'Potty Training',
    image: 'https://images.unsplash.com/photo-1578986128278-4a2f000b5615?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    description: 'Potties, training pants, and books to help with the process'
  }];
  const featuredProducts = [{
    id: 't1',
    name: 'Wooden Building Blocks Set',
    image: 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$49.99',
    rating: 4.9,
    reviewCount: 287
  }, {
    id: 't2',
    name: 'Adjustable Safety Gate',
    image: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$79.99',
    rating: 4.7,
    reviewCount: 215
  }, {
    id: 't3',
    name: 'Toddler Step Stool',
    image: 'https://images.unsplash.com/photo-1578986128278-4a2f000b5615?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$24.99',
    rating: 4.6,
    reviewCount: 178
  }, {
    id: 't4',
    name: 'Balance Bike',
    image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    price: '$89.99',
    rating: 4.8,
    reviewCount: 243
  }];
  return <div className="w-full">
      {/* Hero Section */}
      <div className="bg-cream py-12 md:py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Toddler Essentials (1-3 Years)
            </h1>
            <p className="font-inter text-gray-600 text-lg mb-6">
              Support your toddler's independence, learning, and exploration
              with products designed for this active stage.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="#learning-toys" className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium">
                Learning Toys
              </a>
              <a href="#childproofing" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Childproofing
              </a>
              <a href="#feeding-mealtime" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Feeding & Mealtime
              </a>
              <a href="#potty-training" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Potty Training
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        {/* Categories */}
        <section className="mb-16">
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Toddler Categories
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {categories.map(category => <a key={category.id} href={`/toddler/${category.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <div className="aspect-[4/3] w-full">
                  <img src={category.image} alt={category.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4 bg-white">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {category.title}
                  </h3>
                  <p className="text-sm text-gray-600 mb-2">
                    {category.description}
                  </p>
                  <div className="flex items-center text-terracotta text-sm font-medium">
                    <span>View products</span>
                    <ChevronRightIcon size={16} className="ml-1" />
                  </div>
                </div>
              </a>)}
          </div>
        </section>
        {/* Featured Products */}
        <section className="mb-16">
          <div className="flex justify-between items-center mb-8">
            <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark">
              Top-Rated Toddler Products
            </h2>
            <a href="/toddler/all-products" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
              View all
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featuredProducts.map(product => <a key={product.id} href={`/product/${product.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-white">
                <div className="aspect-square w-full">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4">
                  <h3 className="font-nunito font-semibold text-lg mb-1">
                    {product.name}
                  </h3>
                  <div className="flex items-center mb-2">
                    <div className="flex text-yellow">
                      {[...Array(5)].map((_, i) => <svg key={i} className={`w-4 h-4 ${i < Math.floor(product.rating) ? 'text-yellow fill-current' : 'text-gray-300 fill-current'}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                        </svg>)}
                    </div>
                    <span className="text-xs text-gray-500 ml-1">
                      ({product.reviewCount})
                    </span>
                  </div>
                  <p className="font-medium text-terracotta">{product.price}</p>
                </div>
              </a>)}
          </div>
        </section>
        {/* Development Section */}
        <section>
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Toddler Development
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-4">
                Physical Development
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start">
                  <div className="h-6 w-6 rounded-full bg-terracotta/20 text-terracotta flex items-center justify-center mr-3 mt-0.5">
                    <span className="text-sm font-medium">1</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-dark">Walking & Running</h4>
                    <p className="text-sm text-gray-600">
                      Support gross motor skills with push toys, ride-ons, and
                      outdoor play equipment.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="h-6 w-6 rounded-full bg-terracotta/20 text-terracotta flex items-center justify-center mr-3 mt-0.5">
                    <span className="text-sm font-medium">2</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-dark">Fine Motor Skills</h4>
                    <p className="text-sm text-gray-600">
                      Develop dexterity with stacking toys, shape sorters, and
                      simple puzzles.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="h-6 w-6 rounded-full bg-terracotta/20 text-terracotta flex items-center justify-center mr-3 mt-0.5">
                    <span className="text-sm font-medium">3</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-dark">
                      Climbing & Balance
                    </h4>
                    <p className="text-sm text-gray-600">
                      Encourage coordination with safe climbing toys and balance
                      beams.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-4">
                Cognitive Development
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start">
                  <div className="h-6 w-6 rounded-full bg-yellow/20 text-yellow flex items-center justify-center mr-3 mt-0.5">
                    <span className="text-sm font-medium">1</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-dark">Language Skills</h4>
                    <p className="text-sm text-gray-600">
                      Foster communication with picture books, simple word
                      games, and interactive toys.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="h-6 w-6 rounded-full bg-yellow/20 text-yellow flex items-center justify-center mr-3 mt-0.5">
                    <span className="text-sm font-medium">2</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-dark">Problem Solving</h4>
                    <p className="text-sm text-gray-600">
                      Encourage critical thinking with puzzles, building blocks,
                      and sorting games.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="h-6 w-6 rounded-full bg-yellow/20 text-yellow flex items-center justify-center mr-3 mt-0.5">
                    <span className="text-sm font-medium">3</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-dark">
                      Imagination & Creativity
                    </h4>
                    <p className="text-sm text-gray-600">
                      Spark creativity with pretend play sets, art supplies, and
                      musical instruments.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </section>
      </div>
    </div>;
};